<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.Map" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="org.gnomus.server.C" %>
<%
  Context ctx = Context.get();
  Map lesson = (Map) ctx.data.get("lesson");
  Map item = (Map) ctx.data.get("item");
  Map activity = (Map) ctx.data.get("activity");
  String subtype = (String) activity.get("subtype");
%>
<script type="text/javascript">
  $(document).ready(function() {
    Construct.edit(<%= new Gson().toJson(activity)%>, true);
  })
</script>
<div>
  <a class="f-right" href="/item/edit?id=<%= item.get("id") %>">
    Test this activity
  </a>
  <label for="subtype">
    Activity: Construct
  </label>
  <select id="subtype" name="subtype" onchange="Construct.changeSubtype(this.value)"
          style="font-family: Arial, Helvetica, sans-serif;">
    <%
      for (Map.Entry<String, String> me : C.CONSTRUCT_SUBTYPES.entrySet()) {
    %>
    <option value="<%= me.getKey() %>"<%= me.getKey().equals(subtype) ? " selected=\"selected\"" : "" %>>
      <%= me.getValue().toLowerCase() %>
    </option>
    <%
      }
    %>
  </select>
  of
  <select class="d-none atom" onchange="Construct.editAtom(true)">
    <%
      String atom = (String) activity.get("atom");
      for (Map.Entry<String, String> me : C.ELEMENT_SYMBOL_TO_NAME.entrySet()) {
    %>
    <option value="<%= me.getKey()%>"<%= me.getKey().equals(atom) ? " selected=\"selected\"" : "" %>>
      <%= me.getValue()%>
    </option>
    <%
      }
    %>
  </select>
  <select class="d-none molecule" onchange="Construct.editMolecule(true);">
    <%
      String formula = (String) activity.get("molecule");
      for (Map.Entry<String, String> me : C.MOLECULAR_FORMULA_TO_NAME.entrySet()) {
    %>
    <option value="<%= me.getKey() %>"<%= me.getKey().equals(formula) ? " selected=\"selected\"" : "" %>>
      <%= me.getValue() %> (<%= me.getKey() %>)
    </option>
    <%
      }
    %>
  </select>
  <select class="d-none reaction">
    <option>C6H12O6+6O2->CO2+H2O+energy</option>
    <option>NaHCO3+CH3COOH->CO2+H2O+CH3COONa</option>
  </select>
</div>
<div id="construct_atom" class="d-none construct a-center">
  <canvas class="atom" width="400" height="400"></canvas>
</div>
<div id="construct_molecule" class="d-none construct a-center">
  <canvas class="molecule" width="400" height="400"></canvas>
</div>
<div id="construct_reaction" class="d-none construct a-center">
  <canvas class="reaction" width="200" height="200"></canvas>
</div>
